<template>
  <div class="content-wrap">
    <van-nav-bar title="添加密友" left-arrow @click-left="$router.go(-1)">
    </van-nav-bar>

    <div class="main-content">
      <router-link :to="{name: 'sureFriend', params: {id: item.uid}}" class="message-item friend-item"
                   v-for="item in addFriendList" :key="item.uid">
        <div class="avatar">
          <img :src="item.icon">
        </div>
        <div class="content">
          <p class="name">
            <span>{{item.nick}}</span>
          </p>
        </div>
      </router-link>

      <van-divider :style="{padding: '0 16px'}">共{{addFriendList.length}}个密友申请</van-divider>
    </div>
  </div>
</template>

<script>
  import Socket from '../../utils/socket'
  import { mapState } from 'vuex'

  export default {
    name: 'addFriendList',
    data () {
      return {}
    },
    computed: {
      ...mapState({
        addFriendList: state => state.friend.addFriendList
      })
    },
    methods: {
      getList () {
        Socket.sendData('GetAddFriendsList').then(res => {
          if (res.action === 20006) {
            Socket.setStoreList('setList', { list: res.data, type: 'addFriendList' })
          }
        })
      }
    },
    created () {
      this.getList()
    }
  }
</script>

<style scoped lang="scss">
  .main-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #fff;
    height: 100%;
  }

  .van-search {
    position: relative;
    z-index: 100;
  }

  .van-search__content {
    background: #fff;
  }

  .van-index-bar {
    overflow: auto;
  }
</style>
